<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-for & vue-for中的key的使用</title>
</head>
<body>
    <!-- 如<li v-for="(item,index) in xxx" :key="唯一值"></li> -->
    <!-- v-for -->
    <!-- 1.作用：基于数据循环，多次渲染整个元素（数组、对象、数字...） -->
    <!-- 2.v-for遍历数组语法：v-for="(item,index) in 数组"
         ，其中，item是数组中的每一项，index是下标。 -->
    <!--  -->
    <!-- v-for中的key
     key的作用：给元素添加唯一的标识，便于vue进行列表项的正确排序使用。
     1.key的值只能是字符串或数字类型
     2.key的值必须具有唯一性
     3.推荐使用id作为key(唯一值)，不推荐使用index作为key(会变化，不好对应) -->
    <div id="app">
    <!-- <h3>{{msg}}</h3> -->
     <h3>My interests</h3>
    <!-- 有多种写法  -->
    <ul>
        <!-- <li v-for="(item,index) in list">{{list[index]}}</li> -->
        <!-- <li v-for="(item,index) in list">{{item}}</li> -->
        <!-- <li v-for="item in list">{{item}}</li> -->
        <li v-for="item in interestsList" :key="item.id">
            <span>{{item.name}}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                msg:'水果的种类',
                list:[
                    '苹果',
                    '香蕉',
                    '梨子',
                    '哈密瓜',
                    '榴莲',
                ],
                interestsList:[
                        {id:1,name:'travel'},
                        {id:2,name:'cuisine'},
                        {id:3,name:'see a film'},   
                        {id:4,name:'play games'},   
                        {id:5,name:'ride'},
                        {id:6,name:'sleep'} 
                ]
                    
                
            },
            methods:{
                del(id){
                    this.interestsList=this.interestsList.filter(item =>item.id!==id)
                }
            }
        })
    </script>
</body>
</html>